<!--
* description: 日历控件 - 一年
* author: wbLiuZicong
* createdDate: 2020-03-03
* update: wangml 2021-4-20
-->
<template>
  <div>
    <!-- <div class="calendar-header clear"> -->
    <!-- <div class="calendar-box">
      <div class="calendar-content">
        <span class="calendar-prev" @click="handlePrevMonth"></span>
        <span class="calendar-headDate"> {{this.determineYear}} </span>
        <span class="calendar-next" @click="handleNextMonth"></span>
      </div>
    </div> -->
    <!-- </div> -->
    <el-row class="y-body">
      <el-col v-for="(a_mouth, index2) in visibleCalendar" :key="index2" :span="6">
        <div class="cc-calendar">
          <div class="mouth-title">{{ index2 | setMonthName }}</div>
          <ul class="calendar-week clear">
            <li v-for="(week, i) in calendarTitleArr" :key="i" class="week-item" @click="selectByWeek(week, a_mouth)">{{ week.name }}</li>
          </ul>
          <ul class="calendar-view clear">
            <li
              v-for="(item, index) in a_mouth.dateList"
              :key="index"
              class="date-view"
              :class="[
                {'month-class': !isCurrentMonth(item.date, index2)},
                {todayBg: isCurrentDay(item.date)},
                {handleDay: isInAll(item)},
                {'el-button--primary': isInAll(item)},
              ]"
              @click="handleClickDay(item)"
            >
              <span
                class="date-day"
                :style="dayStyle"
                :class="[{'opacity-class': !isCurrentMonth(item.date)},
                         {'day-class-m': !isCurrentMonth(item.date, index2)},]"
              >
                {{ item.day }}
              </span>
              <span class="calendar-num">
                {{ item.calendarNum }}
              </span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'CcCalendar',
  componentName: 'cc-calendar',
  components: { },
  filters: {
    setMonthName: function(value) {
      switch (value) {
        case 0:
          return '一月'
          break
        case 1:
          return '二月'
          break
        case 2:
          return '三月'
          break
        case 3:
          return '四月'
          break
        case 4:
          return '五月'
          break
        case 5:
          return '六月'
          break
        case 6:
          return '七月'
          break
        case 7:
          return '八月'
          break
        case 8:
          return '九月'
          break
        case 9:
          return '十月'
          break
        case 10:
          return '十一月'
          break
        case 11:
          return '十二月'
          break
        default:
          break
      }
    }
  },
  props: {
    options: Object,
    determineYear: { default: '' },
    setCalendarData: { type: Array, default: [] },
    justShow: { type: Boolean, default: false },
    clickable: { type: Boolean, default: true }
  },
  data() {
    const { year, month, day } = this._getNewDate(new Date())
    return {
      headOptions: {
        type: this.options.type,
        style: this.options.headStyle,
        date: ''
      },
      calendarTitleArr: [
        { name: '一', click: false },
        { name: '二', click: false },
        { name: '三', click: false },
        { name: '四', click: false },
        { name: '五', click: false },
        { name: '六', click: false },
        { name: '日', click: false }
      ],
      time: { year, month, day },
      calendarList: [],
      allData: [],
      moduleId: ''
    }
  },
  computed: {
    dayStyle: function() {
      return {
        textAlign: this.options.viewStyle.day
      }
    },
    visibleCalendar() {
      // alert(JSON.stringify(this.determineYear))
      // alert(JSON.stringify(this.time))
      // alert(JSON.stringify(this.time))
      const ALLcalendatArr = []
      for (let index = 0; index < 12; index++) {
        const calendatArr = []
        // 先得到当前的年，月，日
        const { year, month, day } = this._getNewDate(this._getDate(this.time.year, index, 1))
        // 获取当月的第一天
        const currentFirstDay = this._getDate(year, month, 1)
        // console.log("当前月的第一天：  " + currentFirstDay); // 3月1日 星期天
        // 获取当前月第一天星期几
        let weekDay = currentFirstDay.getDay()
        // console.log("获取当前月第一天星期几  " + weekDay); // 0 等于星期天
        if (weekDay == 0) {
          weekDay = 7
        }
        // 用当月的第一天减去 周几前面几天 这样就能得到上个月开始的天数 （当前月1号是周三，那么周一就是上个月的最后两天）
        //                3月1日 星期天        0
        const startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000
        // console.log("这里是获取第一周第一天是几号有可能是上个月： " + startTime);
        let monthDayNum
        if (weekDay == 5 || weekDay == 6 || weekDay == 7) {
          monthDayNum = 42
        } else {
          monthDayNum = 42
        }
        // 然后得到所有的日期
        for (let i = 0; i < monthDayNum; i++) {
          calendatArr.push({
            date: new Date(startTime + i * 24 * 60 * 60 * 1000),
            year: year,
            month: month + 1,
            day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
            clickDay: false
          })
        }
        this.headOptions.date = `${this._englishMonth(month)} ${year}`
        // console.log(JSON.stringify(calendatArr))
        // return calendatArr

        const item = {
          month: index + 1,
          dateList: calendatArr
        }
        ALLcalendatArr.push(item)
      }
      // console.log(JSON.stringify(ALLcalendatArr))
      return ALLcalendatArr
    }
  },
  // 监听传过来的日期
  watch: {
    determineYear: function(val, oldVal) {
      //  alert(this.determineYear)
      if (this.determineYear) {
        const nowYear = new Date().getFullYear()
        // if (nowYear != this.determineYear) {
        this.time = { 'year': parseInt(this.determineYear), 'month': 0, 'day': 1 }
        // }
        this.generateData(this.determineYear)
      }
    },
    setCalendarData: function(val, oldVal) {
      if (this.setCalendarData.length != 0) {
        this.allData = this.setCalendarData
        this.moduleId = this.setCalendarData[0].moduleId
      }
    }
  },
  mounted() {
    this.generateData(this.determineYear)
  },
  created() {
    console.log(window.href)
    this.time = { 'year': parseInt(this.determineYear), 'month': 0, 'day': 1 }
    this.calendarList = this.visibleCalendar
    this.calendarType = this.options.calendarType
  },
  methods: {
    selectByWeek(week, _month) {
      if (!this.clickable) return
      // console.log(JSON.stringify("选中的星期" + week))
      // console.log(JSON.stringify(_month))
      // console.log(JSON.stringify(_month.dateList[6].date.getDay()))
      let _week
      switch (week.name) {
        case '一':
          _week = 1
          break
        case '二':
          _week = 2
          break
        case '三':
          _week = 3
          break
        case '四':
          _week = 4
          break
        case '五':
          _week = 5
          break
        case '六':
          _week = 6
          break
        case '日':
          _week = 0
          break
      }
      var _b_m = []
      for (let index = 0; index < _month.dateList.length; index++) {
        if (_month.dateList[index].date.getDay() == _week) {
          // if (!_month.dateList[index].clickDay) {
          //   this.handleClickDay2(_month.dateList[index], 1)
          // } else {
          //   this.handleClickDay2(_month.dateList[index], 0)
          // }
          debugger
          if (!this.isCurrentMonth(_month.dateList[index].date, (_month.dateList[index].month - 1))) {
          } else {
            _b_m.push(_month.dateList[index])
          }
        }
      }
      // alert(JSON.stringify(_b_m))
      for (let i = 0; i < _b_m.length; i++) {
        if (!_b_m[i].clickDay) {
          for (let ii = 0; ii < _b_m.length; ii++) {
            this.handleClickDay2(_b_m[ii], 1)
          }
          return false
        }
      }
      var hh = _b_m.filter(function(a) {
        return a.clickDay == true
      })
      if (hh.length == _b_m.length) {
        for (let ii = 0; ii < _b_m.length; ii++) {
          this.handleClickDay2(_b_m[ii], 0)
        }
      }
      // if (!week.click) {
      //   for (let index = 0; index < _month.dateList.length; index++) {
      //     if (_month.dateList[index].date.getDay() == _week) {
      //       this.handleClickDay2(_month.dateList[index], 1)
      //     }
      //   }
      //   for (let i = 0; i < this.calendarTitleArr.length; i++) {
      //     if (this.calendarTitleArr[i].name == week.name) {
      //       this.calendarTitleArr[i].click = true;
      //     }
      //   }
      // } else {
      //   for (let index = 0; index < _month.dateList.length; index++) {
      //     if (_month.dateList[index].date.getDay() == _week) {
      //       this.handleClickDay2(_month.dateList[index], 0)
      //     }
      //   }
      //   for (let i = 0; i < this.calendarTitleArr.length; i++) {
      //     if (this.calendarTitleArr[i].name == week.name) {
      //       this.calendarTitleArr[i].click = false;
      //     }
      //   }
      // }
    },
    handleClickDay2(item, I) {
      // alert("点击事件生效")
      this.$forceUpdate()// 强制重新渲染 先看看效果 暂时发现有些延迟
      // this.calendarList.map( x => {
      //   x.clickDay = false;
      // });
      // console.log(JSON.stringify(item))
      if (!this.isCurrentMonth(item.date, (item.month - 1))) {
        return
      }
      if (I) {
        this.$set(item, 'clickDay', true)
        // let pj = eval('date'+item.day)
        this.allData[item.month - 1]['date' + item.day] = '1'
      } else {
        this.$set(item, 'clickDay', false)
        // let pj = eval('date'+item.day)
        this.allData[item.month - 1]['date' + item.day] = '0'
      }
      // if (!item.clickDay) {
      // this.$set(item, 'clickDay', true);
      // let pj = eval('date'+item.day)
      // this.allData[item.month-1]['date' + item.day] = '1';
      // } else {
      //   this.$set(item, 'clickDay', false);
      //   // let pj = eval('date'+item.day)
      //   this.allData[item.month-1]['date' + item.day] = '0';
      //   // this.allData[item.month-1].pj = '0';
      // }
      // console.log(JSON.stringify(this.allData))
      this.$emit('getCalendarData', this.allData) // 发父组件
    },
    // 生成数据啊啊啊啊啊啊
    generateData(determineYear) {
      // alert("进入生成数据")
      // 首先根据原来【工作日历】的逻辑， 貌似是每当重新选择年份之前的数据就没了，每次传给后台的 只能是某一年的数据，不能也没有两年的数据
      // 所以这个方法就是每次watch检听到年份改变就调用 先生成一整年的数据（空的）
      // 然后根据click事件动态改变里面的值
      // 下面是一个月的格式
      // {"date1":"0","date2":"0","date3":"0","date4":"0","date5":"0","date6":"0","date7":"0","date8":"0","date9":"0","date10":"0","date11":"0","date12":"0","date13":"0","date14":"0","date15":"0","date16":"0","date17":"0","date18":"0","date19":"0","date20":"0","date21":"0","date22":"0","date23":"0","date24":"0","date25":"0","date26":"0","date27":"0","date28":"0","date29":"0","date30":"0","date31":"0","yearMonths":"202001","calendarType":"0","isEnable":"1","moduleName":"1","state":"0"},
      this.allData = []
      for (let index = 1; index <= 12; index++) {
        // 拼接yearMonths
        let indexZ = index
        if (indexZ < 10) {
          indexZ = '0' + indexZ
        }
        const p = determineYear + '' + indexZ
        let item
        if (this.moduleId) {
          item = { 'date1': '0', 'date2': '0', 'date3': '0', 'date4': '0', 'date5': '0', 'date6': '0', 'date7': '0', 'date8': '0', 'date9': '0', 'date10': '0', 'date11': '0', 'date12': '0', 'date13': '0', 'date14': '0', 'date15': '0', 'date16': '0', 'date17': '0', 'date18': '0', 'date19': '0', 'date20': '0', 'date21': '0', 'date22': '0', 'date23': '0', 'date24': '0', 'date25': '0', 'date26': '0', 'date27': '0', 'date28': '0', 'date29': '0', 'date30': '0', 'date31': '0', 'yearMonths': p, 'calendarType': '0', 'isEnable': '1', 'moduleName': '1', 'state': '0', 'moduleId': this.moduleId }
        } else {
          item = { 'date1': '0', 'date2': '0', 'date3': '0', 'date4': '0', 'date5': '0', 'date6': '0', 'date7': '0', 'date8': '0', 'date9': '0', 'date10': '0', 'date11': '0', 'date12': '0', 'date13': '0', 'date14': '0', 'date15': '0', 'date16': '0', 'date17': '0', 'date18': '0', 'date19': '0', 'date20': '0', 'date21': '0', 'date22': '0', 'date23': '0', 'date24': '0', 'date25': '0', 'date26': '0', 'date27': '0', 'date28': '0', 'date29': '0', 'date30': '0', 'date31': '0', 'yearMonths': p, 'calendarType': '0', 'isEnable': '1', 'moduleName': '1', 'state': '0' }
        }
        this.allData.push(item)
      }
      // console.log(JSON.stringify(this.allData))
    },
    _formatDate(date) {
      date = Number(date)
      return date < 10 ? `0${date}` : date
    },
    _englishMonth(month) {
      let engMonth
      const englishMonthList = [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月'
      ]
      englishMonthList.map(() => {
        engMonth = englishMonthList[month]
      })
      return engMonth
    },
    _getNewDate(date) {
      const year = date.getFullYear()
      const month = date.getMonth()
      const day = date.getDate()
      return { year, month, day }
    },
    _getDate(year, month, day) {
      return new Date(year, month, day)
    },
    // 是否是当前月
    isCurrentMonth(date, _month) {
      const { year: currentYear, month: currentMonth } = this._getNewDate(this._getDate(this.time.year, _month, 1))
      const { year, month } = this._getNewDate(date)
      return currentYear == year && currentMonth == month
    },
    // 在allData中是否存在
    isInAll(item) {
      if (!this.isCurrentMonth(item.date, (item.month - 1))) {
        return false
      }
      if (this.allData.length > 0 && this.allData[item.month - 1]['date' + item.day] == 1) {
        this.$set(item, 'clickDay', true)
        return true
      } else {
        return false
      }
    },
    // 是否是今天
    isCurrentDay(date) {
      const { year: currentYear, month: currentMonth, day: currentDay } = this._getNewDate(new Date())
      const { year, month, day } = this._getNewDate(date)
      return currentYear == year && currentMonth == month && currentDay == day
    },
    // 上一个月
    handlePrevMonth() {
      if (this.moduleId) {
        return false
      }
      // let prevMonth = this._getDate(this.time.year,this.time.month,1);
      // let dcMonth = prevMonth.getMonth() + 1;
      // let dcYear  = prevMonth.getFullYear();
      // // console.log("当前年 == " + dcYear)
      // // console.log("当前月 == " + dcMonth)
      // // let nowYear = new Date().getFullYear();
      // // if (this.determineYear != dcYear) {
      //   if (dcMonth == 1) {
      //     // 提示文案待定 或 不提示
      //     // this.$message({
      //     //   type: "error",
      //     //   message: ""
      //     // });
      //     return;
      //   }
      // // }
      // prevMonth.setMonth(prevMonth.getMonth() - 1);
      // this.time = this._getNewDate(prevMonth);
      // this.headOptions.date = `${this._englishMonth(this.time.month)} ${this.time.year}`;
      const nowYear = new Date().getFullYear()
      if (this.determineYear == nowYear) {
        return false
      } else {
        const a_newM = parseInt(this.determineYear) - 1
        this.$emit('handlePrevYear', a_newM)
        // alert("现在是" + this.determineYear)
      }
    },
    // 下一个月
    handleNextMonth() {
      if (this.moduleId) {
        return false
      }
      const a_newM = parseInt(this.determineYear) + 1
      // let nextMonth = this._getDate(this.time.year,this.time.month,1);
      // let dcMonth = nextMonth.getMonth() + 1;
      // let dcYear  = nextMonth.getFullYear();
      // // console.log("当前年 == " + dcYear)
      // // console.log("当前月 == " + dcMonth)
      // // if (this.determineYear != dcYear) {
      //   if (dcMonth == 12) {
      //     // 提示文案待定 或 不提示
      //     // this.$message({
      //     //   type: "error",
      //     //   message: ""
      //     // });
      //     return;
      //   }
      // // }
      // nextMonth.setMonth(nextMonth.getMonth() + 1);
      // this.time = this._getNewDate(nextMonth);
      // this.headOptions.date = `${this._englishMonth(this.time.month)} ${this.time.year}`;
      this.$emit('handleNextYear', a_newM)
    },
    // 点击回到今天
    handleToday() {
      this.time = this._getNewDate(new Date())
      // this.returnDate();
      this.$emit('handleToday')
    },
    // 点击某一天
    handleClickDay(item) {
      if (!this.clickable) return
      if (this.justShow) {
        return false
      }
      // alert("点击事件生效")
      this.$forceUpdate()// 强制重新渲染 先看看效果 暂时发现有些延迟
      // this.calendarList.map( x => {
      //   x.clickDay = false;
      // });
      // console.log(JSON.stringify(item))
      if (!this.isCurrentMonth(item.date, (item.month - 1))) {
        return
      }
      if (!item.clickDay) {
        this.$set(item, 'clickDay', true)
        // let pj = eval('date'+item.day)
        this.allData[item.month - 1]['date' + item.day] = '1'
      } else {
        this.$set(item, 'clickDay', false)
        // let pj = eval('date'+item.day)
        this.allData[item.month - 1]['date' + item.day] = '0'
        // this.allData[item.month-1].pj = '0';
      }
      // console.log(JSON.stringify(this.allData))
      this.$emit('getCalendarData', this.allData) // 发父组件
    }
  }
}
</script>

<style scoped>
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td, span {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body {
  font-size: 12px;
  font-style: normal;
  font-family: 微软雅黑, Helvetica, sans-serif;
}

small {
  font-size: 12px
}

h1 {
  font-size: 18px
}

h2 {
  font-size: 16px
}

h3 {
  font-size: 14px
}

h4, h5, h6 {
  font-size: 100%
}

ul, ol {
  list-style: none
}

a {
  text-decoration: none;
  background-color: transparent
}

a:hover, a:active {
  outline-width: 0;
  text-decoration: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  border: 0;
  height: 1px
}

img {
  border-style: none
}

img:not([src]) {
  display: none
}

svg:not(:root) {
  overflow: hidden
}

html {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%
}

input, textarea, button, a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}

audio, canvas, progress, video {
  display: inline-block
}

/*audio:not([controls]), video:not([controls]) {
  display: none;
  height: 0
}*/

progress {
  vertical-align: baseline
}

mark {
  background-color: #ff0;
  color: #000
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

input, select, textarea {
  font-size: 100%;
  outline: 0;
}

button, input {
  overflow: visible
}

button, select {
  text-transform: none
}

textarea {
  overflow: auto
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

.clear:after {
  display: block;
  height: 0;
  content: "";
  clear: both
}
@media (min-width: 1200px) {
  body{
    min-width: 1200px;
  }
}
@media (max-width: 991px){
  body, html{
    overflow-x: initial!important;
  }
}
button {
  outline:none
}
/* ----------------------- */
.y-body{
  background: #fff;
}
.cc-calendar {
  padding-bottom: 15px;
  width: 90%;
  margin: 6px auto;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  /*box-shadow: -3px -3px 3px rgba(0, 0, 0, 0.1);*/
  border: 1px solid #ccc;
  border-radius: 3px;
}
.cc-calendar .mouth-title {
  font-family: JingGang,serif;
  padding: 2px 10px;
  color: #fff;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to right top, #2d98e0, #8ae4f3);
}
.cc-calendar .calendar-week {
  width: 100%;
  height: 22px;
  line-height: 22px;
  border: 1px solid #E4E7EA;
  border-right: none;
}
.cc-calendar .calendar-week .week-item {
  float: left;
  width: 14.285%;
  text-align: center;
  font-size: 10px;
  color: #424953;
  border-right: 1px solid #E4E7EA;
  font-weight: 600;
}
.cc-calendar .calendar-view {
  width: 100%;
  border-left: 1px solid #E4E7EA;
}
.cc-calendar .calendar-view .date-view {
  float: left;
  width: 14.285%;
  height: 24px;
  border-right: 1px solid #E4E7EA;
  border-bottom: 1px solid #E4E7EA;
  cursor: pointer;
  transition: .5s;
}
/*.cc-calendar .calendar-view .date-view:hover {*/
/*  float: left;*/
/*  width: 14.285%;*/
/*  height: 24px;*/
/*  border-bottom: 2px solid rgba(0, 0, 0, .7);*/
/*  cursor: pointer;*/
/*}*/
.cc-calendar .calendar-view .date-view .date-day {
  /* padding: 3px 4px; */
  line-height: 2;
  display: block;
  width: 100%;
  font-size: 13px;
  color: #535e71;
  transition: .3s;
}
.cc-calendar .calendar-view .date-view .date-day:hover {
  /* padding: 3px 4px; */
  line-height: 2;
  display: block;
  width: 100%;
  font-size: 13px;
  color: #535e71;
  border-bottom: 2px solid #000;
}
.cc-calendar .calendar-view .date-view.month-class .date-day:hover {
  border: none;
}
.cc-calendar .calendar-view .date-view .calendar-num {
  margin-top: 6px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #424953;
}
.cc-calendar .calendar-view .opacity-class {
  opacity: .5;
}
.cc-calendar .calendar-view .month-class {
  /* background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
  background-size: 20px 20px; */
  background-color: #faf9f9;
  color: #faf9f9 !important;
  cursor: not-allowed !important;
}
.cc-calendar .calendar-view .todayBg {
   background: #e5cb15;
}
.cc-calendar .calendar-view .todayBg.month-class {
  background: #fff;
}
.cc-calendar .calendar-view .handleDay {
  background: #6f8ed4;
}
.cc-calendar .calendar-view .handleDay .date-day {
  color: #fff !important;
}
.cc-calendar .calendar-view .handleDay .calendar-num {
  color: #fff !important;
}
.mouth-title {
  text-align: left;
  font-size: 14px;
  color: #424953;
  font-weight: 600;
  padding: 0px 0px 5px 0px;
}
.day-class-m {
  color: #fff !important;
}
.calendar-header {
  padding-bottom: 15px;
  width: 100%;
  background: #fff;
}
.calendar-header .calendar-box {
  position: relative;
  height: 32px;
  line-height: 32px;
}
.calendar-header .calendar-box .calendar-content {
  width: 100%;
  text-align: center;
}
.calendar-header .calendar-box .calendar-content .calendar-prev,
.calendar-header .calendar-box .calendar-content .calendar-next {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 11px;
  background: url('') no-repeat;
  background-size: contain;
  cursor: pointer;
}
.calendar-header .calendar-box .calendar-content .calendar-next {
  background: url('') no-repeat;
  background-size: contain;
}
.calendar-header .calendar-box .dispersion {
  width: initial;
  display: inline;
}
.calendar-header .calendar-box .calendar-headDate {
  vertical-align: middle;
  margin: 0 12px;
  font-size: 18px;
  color: #424953;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.calendar-header .calendar-box .calendar-today {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 30px;
  text-align: center;
  border: 1px solid #2061FF;
  border-radius: 4px;
  font-size: 14px;
  color: #2061FF;
  cursor: pointer;
}
.calendar-header .calendar-box .dispersion-today {
  position: inherit;
}
.calendar-header .calendar-box .calendar-center {
  margin: 0 auto;
}
.calendar-header .calendar-box .calendar-left {
  float: left;
}
.calendar-header .calendar-box .calendar-right {
  float: right;
}
</style>
